{% extends 'base.html' %}
{# extends子模板继承父模板。填写父模板的文件路径 #}

{% block container %}
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
    <div class="container">

        <div class="row">
            <div class="col-4"></div>
            <div class="col" style="height: 100px">
                {#                <h1>编辑房源</h1>#}
            </div>
        </div>
        <div class="row">
            <div class="col-2">
            </div>
            <div class="col-8">
                <form action='/house/edit/12/' method='post'>
                    {% csrf_token %}
                    {% verbatim %}
                    <div id="vue_data">
                        <div class="form-group">
                            <label for="exampleInputEmail1">房源名</label>
                            <input type="text" class="form-control" name="house_name" id="house_name"
                                   aria-describedby="emailHelp" value="test text">
                            <small id="emailHelp" class="form-text text-muted"></small>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">面积</label>
                            <input type="number" class="form-control" name="house_area" id="house_area" value="150">
                        </div>
                        <div class="form-group">
                            <label for="input_province">地址</label>
                            <select v-model="province" v-on:change="data_change('province')"
                                    class="form-control" style="display: inline">
                                <option v-for="province_detail in province_list" v-bind:value="province_detail">
                                    {{ province_detail }}
                                </option>
                            </select>
                            <select v-model="city" v-on:change="data_change('city')"
                                    class="form-control" style="display: inline">
                                <option v-for="city_detail in city_list" v-bind:value="city_detail">
                                    {{ city_detail }}
                                </option>
                            </select>
                            <select v-model="county" v-on:change="data_change('county')"
                                    class="form-control" style="display: inline">
                                <option v-for="county_detail in county_list" v-bind:value="county_detail">
                                    {{ county_detail }}
                                </option>
                            </select>
                            <select v-model="town" v-on:change="data_change('town')"
                                    class="form-control" style="display: inline">
                                <option v-for="town_detail in town_list" v-bind:value="town_detail">
                                    {{ town_detail }}
                                </option>
                            </select>
                            <select v-model="village" v-on:change="data_change('village')"
                                    class="form-control" style="display: inline">
                                <option v-for="village_detail in village_list" v-bind:value="village_detail">
                                    {{ village_detail }}
                                </option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">保存</button>
                        {{ test_data }}
                    </div>
                    {% endverbatim %}
                </form>
            </div>
        </div>
    </div>

{% endblock container %}

{% block vue_script %}
    <script>
        new Vue({
            el: "#vue_data",//div的id
            data: {
                test_data: "test_data",
                province: "",
                city: "",
                county: "",
                town: "",
                village: "",
                province_list: ["北京a", "北京a2"],
                city_list: ["北京b", "北京b2"],
                county_list: ["北京c", "北京c2"],
                town_list: ["北京d", "北京d2"],
                village_list: ["北京e", "北京e2"],
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                },
                data_change: function (val) {

                    if (val == "province")
                        console.log(this.province);
                    if (val == "city")
                        console.log(this.city);
                    if (val == "county")
                        console.log(this.county);
                    if (val == "town")
                        console.log(this.town);
                    if (val == "village")
                        console.log(this.village);

                    axios({
                        method: 'get',
                        url: '/house/district/',
                        data:{
                            "district_level":val,
                            "name":this.city
                        }
                    }).then(function (resp) {
                        console.log("resp.data");
                        console.log(resp.data);

                    }).catch(resp => {
                        console.log('请求失败：' + resp.status + ',' + resp.statusText);
                    });
                }
            }
        });
    </script>
{% endblock %}
